<template>
	<view class="container" style="max-width: 100%;overflow-x: hidden;">
		<view class="box" v-if="newUser">
			<image src="https://m.nocexpo.com/statics/js/modules/h5/img/shouye.png" mode=""></image>
			<text class="dianji">点击这里一键 </text>
			<text class="dianji" style="color: #1DBAB6; right:5%">发布需求</text>
			<image src="../../../static/image/jiantou.png"  style="width:78rpx; height: 184rpx; bottom: 11%; right:80px" mode=""></image>
			<text class="zhdao" @click="liaojie">我知道啦！~</text>
		</view>
		<m-tabbar native ref="tabber">
		    <template v-slot:tabbar_index_1> 
		        <view class="custom_style">
		            <view class="custom_style_icon">+</view>
		        </view>
		    </template>
		</m-tabbar>
		<view class="module">
			<navigator url="/pages/search/search" hover-class="none" class="search">
				<view class="icon-input">
					<uni-icons class="icon" color="#a1a0a0" type="search" size="20"></uni-icons>
					<input placeholder="输入关键字搜索产品/供应商" placeholder-class="input" />
				</view>
				<view class="btn">搜索</view>
			</navigator>
			<view class="menu">
				<scroll-view scroll-x class="list">
					<view class="item" :class="{active:active==index}" v-for="(item,index) in searchWordList" @click="changeTable(index)" :key="index">
						<view>{{item.keyword}}</view>
						<image class="imga" src="https://m.nocexpo.com/statics/js/modules/h5/img/banhu.png" mode="widthFix" />
					</view>
				</scroll-view>
				<view class="add" hover-class="none" @click="toClassify()"><image class="img" src="/static/image/common/add_menu.png" mode="widthFix" /></view>
			</view>
		</view>
		<scroll-view @scroll="scroll" @scrolltolower="onRefresh"  :scroll-top="scrollTop" scroll-y class="scroll-view">
			<view class="c">
				<swiper class="swiper" :indicator-dots="true" indicator-active-color="#ffffff" indicator-color="rgba(255,255,255,0.32)"
					autoplay="true" interval="3500" circular="true" >
          <block v-for="(item,index) in bannerList" :key="index">
            <swiper-item  @click="toBannerLink(item)"  v-if="(currentUser.type == 1 && currentUser.state == 1 && item.type == 2) || (currentUser.type != 1 && currentUser.state != 1 && item.type == 1) || item.type == 0">
              <image class="img" :src="item.img"  style="width: 100%;"></image>
            </swiper-item>
          </block>
				</swiper>
				<view class="noticebar">
					<image class="imga" src="https://m.nocexpo.com/statics/js/modules/h5/img/gonggao.png" mode="widthFix" />
					<uni-notice-bar
						class="bar"
						speed="6"
						background-color=""
						scrollable
						single
						:text="baseNoticeStr"
					></uni-notice-bar>
				</view>
				<view class="m-list">
					<navigator v-for="(item,index) in menuList" @click="toPage(item.url)" class="item" hover-class="none">
						<image class="img" :src="item.icon" mode="widthFix" />
						<view class="text">{{item.menuName}}</view>
					</navigator>
				<!-- 	<navigator url="/pages/exhibition/list/list" class="item" hover-class="none">
						<image class="img" src="/static/image/zhanhui.png" mode="widthFix" />
						<view class="text">展会</view>
					</navigator>
					<navigator url="/pages/need/list/list" class="item" hover-class="none">
						<image class="img" src="/static/image/xuqiu.png" mode="widthFix" />
						<view class="text">需求大厅</view>
					</navigator>
					<navigator open-type="switchTab" @click="toLive()" class="item" hover-class="none">
						<image class="img" src="/static/image/zhibo.png" mode="widthFix" />
						<view class="text">直播</view>
					</navigator>
					<navigator url="/pages/product/concentration/concentration?index=4" class="item" hover-class="none">
						<image class="img" src="/static/image/xinpin.png" mode="widthFix" />
						<view class="text">新品精选</view>
					</navigator>
					<navigator url="/pages/product/concentration/concentration?index=3" class="item" hover-class="none">
						<image class="img" src="/static/image/tuijian.png" mode="widthFix" />
						<view class="text">商家推荐</view>
					</navigator> -->
				<!-- <navigator open-type="switchTab" @click="toLive()" class="item" hover-class="none">
					<image class="img" src="/static/image/zhibo.png" mode="widthFix" />
					<view class="text">直播</view>
				</navigator> -->
				</view>
				<view class="product-data-list">
					<navigator v-for="(item,index) in productList" @click="toProductDetail(item)" class="item"  hover-class="none">
						<view class="tit-a" v-if="item.exhibitionList != null" v-for="(ee,index) in item.exhibitionList"  style="width: 50%;position: absolute;top: 0;right: 0;color: #fff" :style="{background: getProductFontBackgroundColor(item)}" >
							{{item.exhibitionList[0].exhibitionShortName}}
						</view>
						<view class=""  v-if="item.remainNum>0">
              <image class="img" :src="item.banarImg" mode="widthFix"/>
						<view v-if="item.newTag == 1" class="new">新上架</view>
						<view  class="title">
							<view v-if="item.isNewProduct == 1" class="xin">新品</view>
							<view v-if="item.samplebookId != 0" class="yang">样册</view>
							{{item.tradeName}}
						</view>
						<view class="price">
							<view class="tejia">
								<text>￥</text>
								{{item.activityProPrice}}
								<view class="qiang">抢</view>
							</view>
						</view>
							</view>
							<view  v-else>
                <image class="img" :src="item.banarImg"  mode="widthFix"/>
							<view v-if="item.newTag == 1" class="new">新上架</view>
							<view  class="title">
								<view v-if="item.isNewProduct == 1" class="xin">新品</view>
								<view v-if="item.samplebookId != 0" class="yang">样册</view>
								{{item.tradeName}}
							</view>
							<view class="price">
								<text>￥</text>
								{{item.price}}
							</view>
						</view>
					</navigator>
				</view>
				<hint ref="hint"></hint>
			</view>
		</scroll-view>
    <view style="width: 100%;">
      <official-account @load="load" @error="binderror" style=""></official-account>
    </view>
		<!--全局悬浮-->
		<suspension ref="suspension"  types="mp,group"></suspension>
		<view v-if="tabNew">
			<newChild></newChild>
		</view>
		
	</view>
</template>

<script>
import indexApi from '@/utils/request/index.js';
import newChild from '../new/new_child.vue'
import banner from '@/api/banner.js';
import commonMethod from '@/utils/commonMethod.js';

export default {
	data() {
		return {
			newUser:false,
			scrollTop: 0,
			title: 'Hello',
			dataList: [],
			bannerList: [],
			searchWordList:[],
			productSearch:{
				search: '',
				page: 1,
				limit: 10,
			},
			productList: [],
			baseNoticeList: [],
			baseNoticeStr:'',
			active:0,
			totalPages:0,
			currentPage : 1,
			index_share_title:'',
			index_share_desc:'',
			share_url:'',
			current:{},
			currentUser:{type: ''},
			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			currentUrl:'',//当前页面全路径
			menuList: [],
			box:false,
			tabNew:false,
			isPos:false,
			imgUrl: indexApi.baseUrl
		};
	},
	components:{
		newChild
	},
	onLoad() {
    this.getCurrentUser();
    this.getFrontMenu();

    //返回的事page，接收不到
    banner.getBanner().then(data => {
      this.bannerList = data.data.page.list;
      commonMethod.getPageShareConfig().then(res =>{
        res.data.list.forEach((value, index, array) => {
          if (value.pageParam.includes("index")) {
            if (value.shareTitleConfig != null && value.shareTitleConfig != '') {
              this.index_share_title = value.shareTitleConfig
            }
            if (value.shareDescConfig != null && value.shareDescConfig != '') {
              this.index_share_desc = value.shareDescConfig
            }
          }

        })
      })
    });

    const pages =getCurrentPages()
    const currentPage =pages[pages.length - 1]
    this.currentUrl = currentPage.$page.fullPath
    let url = currentPage.$page.fullPath
    console.log(url);
    if(url.indexOf('?') > 0){
      url = url.substring(0,url.indexOf('?'))
    }
    if(uni.getStorageSync("userId") != "" && uni.getStorageSync("userId") != null){
      url = url + '?sourceUserId=' + uni.getStorageSync("userId");
    }
    //没找到缓存位置，原页面缓存参数页面也找不到
    // let activity_share_id = uni.getStorageInfoSync('activity_share_id')
    // if(activity_share_id && this.currentUser.type != 3){
    // 	url = url + '?act_share_id=' + activity_share_id;
    // }
    this.share_url = url;

    let obj = wx.getLaunchOptionsSync();//获取当前小程序的场景值
    console.log(obj,'获取当前小程序的场景值')
    console.log(obj.scene);
		this.getFrontMenu();
	},
	onShow(){
	
		if(uni.getStorageSync("register") == 1){
			this.$refs.suspension.setRegister(false);
		}
		this.getCurrentUser();
		this.tabNew=false
		this.tabNew=this.$store.state.tabNew
		console.log(this.tabNew);
		if(this.tabNew){
			
		}else{
			this.$refs.tabber.tabbarList[2].iconPath="/static/image/tabBar/fabu.png"
		}
		setTimeout(()=> {
			
			if (getApp().globalData.onShow) {
				getApp().globalData.onShow = 0;
				console.log("demo前后台切换之切到前台")
			}
			else {
				console.log("demo页面被切换显示")
				this.startTime = +new Date();
			}
			
		}, 100);
	},
	
	onHide(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onUnload(){
		
	},
  load(value){
    console.log("加载成功");
    console.log(value)
  },
  binderror(value){
    console.log("加载失败");
    console.log(value)
  },
	async mounted() {
			
		//获取点选关键字
		banner.getSearchWordList().then(data => {
			this.searchWordList = data.data.list;
			this.searchWordList.unshift({id:0,keyword:'推荐'});
		});

		this.queryProductList();

		banner.getBaseNotice().then(data =>{
			this.baseNoticeList = data.data.page.list
			if(this.baseNoticeList != null && this.baseNoticeList.length > 0){
				this.baseNoticeList.forEach(notice =>{
					this.baseNoticeStr = this.baseNoticeStr + notice.notice + "      ";
				})
			}
		});
		// this.$refs.hint.setStatus('loadingComplete');
	},
	onShareAppMessage: function () {//分享
	    return {
	        title: this.index_share_title,
	        path: this.share_url,
			desc: this.index_share_desc,
			imageUrl: "",
	        success: function (res) {
	            console.info(res + '成功');
	            wx.showToast({
	                title: '分享成功',
	            })
	            // 转发成功
	        },
	        fail: function (res) {
	            console.log(res + '失败');
	            // 转发失败
	        },
	        // complete: function (res) {
	        //     // 不管成功失败都会执行
	        //     console.log(res,'成功或失败')
	        //     wx.showToast({
	        //         title: '成功或失败',
	        //     })
	        // }
	    }
	 },
	/*分享朋友圈 */
	onShareTimeline: function() {
		return {
			title: this.index_share_title,
			query: '&sourceUserId=' + uni.getStorageSync("userId"),
			imageUrl: this.bannerList[0].img,
		}
   },

	methods: {
		getFrontMenu(){
			commonMethod.getFrontMenu().then(res =>{
				this.menuList = res.data.list
			})
		},
		saveFootPrint(stayTime){
			commonMethod.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"金诺云展-机械加工行业对接平台")
			
		},
		getCurrentUser(){
        commonMethod.currentUserAxios().then(res =>{
          this.currentUser = res.data.session_user_h5;
        });
				if(uni.getStorage("zt")==0){
					this.newUser=true;
				}else if(uni.getStorage("zt")==1){
					this.newUser=false;
				}
		},
		liaojie(){
			this.newUser=false;
		},
		queryProductList(){
			banner.getProductList(this.productSearch).then(data => {
				this.productList = [...this.productList,...data.data.page.list];
				this.totalPages = data.data.page.pages;
				this.currentPage = data.data.page.pageNum;
				if(this.currentPage == 1 && this.productList.length == 0){
					this.$refs.hint.setStatus('noData');
				}
				this.productList.forEach(item =>{
					if(item.banarImg){
						item.banarImg = item.banarImg.split(',')[0];
					}
					if(item.price == 0){
						item.price = '询价';
					}else{
						item.price = commonMethod.handlePrice(item.price);
					}
				});
			});
		},
		/**
		 * scroll-view返回顶部必加
		 */
		backTop() {
			this.$nextTick(function() {
				this.scrollTop = 0;
			});
		},
		scroll(e) {
			this.scrollTop = e.detail.scrollTo;
			this.$store.dispatch('renewScrollTop', e.detail.scrollTop);
		},
		//点击推荐搜索栏关键词
		changeTable(index) {
			if(this.searchWordList[index] != null && this.searchWordList[index] != ''){
				this.productSearch.search = this.searchWordList[index].keyword;
			}
			//查询推荐
			if (index == 0) {
				this.productSearch.search = ''
			}
			//初始化分页参数
			this.productSearch.page = 1
			//点击非当前选中的关键词才触发查询
			if(this.active!=index){
				//查询之前先清空数据
				this.productList = []
				this.queryProductList();
			}
			//设置选中的下标值
			this.active = index
		},
		onRefresh() {
			if(this.currentPage < this.totalPages){
				this.productSearch.page++;
				this.$refs.hint.setStatus('loading');
				console.log("还有下一页" + this.productSearch.page);
				this.queryProductList();
			}else{
				this.$refs.hint.setStatus('loadingComplete');
				console.log("没有下一页")
			}
		},
		toBannerLink(item){
			//跳转的链接带参数，webview跳转后把参数去掉了
			//console.log(item.navagator);
		  if(item.navagator.indexOf('guanzhu') != -1) {
			uni.reLaunch({
			  url:'/pages/tabBar/find/find?tabIndex=3',
			})
		  }else if (item.navagator.indexOf('cloudcomp') != -1){
			uni.navigateTo({
			  url:'/pages/product/showroom/showroom?userId=' + item.navagator.split('=')[1],
			})
		  }else if(item.navagator.indexOf('cloudhome') != -1) {
			uni.navigateTo({
			  url: '/pages/exhibition/detail/detail?id=' + item.navagator.split('=')[1],
			})
		  }else if(item.navagator.indexOf('memberBusiness') != -1){
			  uni.navigateTo({
			    url: '/pages/need/member/memberDemand',
			  })
		  }else if(item.navagator.indexOf('index') != -1){
			  uni.switchTab({
			  	url: '/pages/tabBar/index/index',
			  })
		  }else if(item.navagator.indexOf('active') != -1){
				uni.navigateTo({
					url: '/pages/product/active/active',
				})
		  }
		},
		getProductFontBackgroundColor(product){
		    // if (product.hasOwnProperty("exhibitionList")){
		        return product.exhibitionList[0].fontBackgroundColor
		    // }
		},
		toProductDetail(item){
			uni.navigateTo({
				url:'/pages/product/productDetail/productDetail?productId=' + item.id
			})
		},
		toPage(url){
			console.log(url);
			if(url.includes("tabBar")){
				uni.reLaunch({
					url: url,
				})
			}else{
				uni.navigateTo({
					url:url
				})
			}
		},
		// 活动
		// toLive(){
		// 	uni.navigateTo({
		// 		url:'../../../pages/product/active/active',
		// 	})
		// },
		async toClassify(){
			//判断是否登录
			this.register = await commonMethod.getUserLoginFlag();
			if (this.register) {
			  uni.redirectTo({
				  url: '/pages/account/login/login',
			  })
			}
			uni.navigateTo({
				url: '/pages/classify/classify'
			})
		}
		
	}
};
</script>

<style lang="scss" scoped>
		
	.box::v-deep{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.7);
		z-index: 999999;
	}
	.tejia{
		width: 315rpx;
		height:54rpx;
		margin-top: 10px;
		background: url(https://img.nocexpo.com/t/20240220/3fb6281ca4de48418e83321cfb5bfa86.png);
		background-size: 100% 100%;
		background-position: 50% 50%;
		background-repeat: no-repeat;
	}
	.qiang{
		position: relative;
		left:81%;
		top:-78%;
		font-size: 18px;
		font-weight: 600;
		color: white;
		font-family: SourceHanSansSC, SourceHanSansSC;
	}
		
	.box image{
		width: 310rpx;
		height: 396rpx;
		position: fixed;
		bottom: -5%;
		right: 30%;
		
	}
	.box .dianji{
		width: 310rpx;
		height: 396rpx;
		position: fixed;
		bottom: -5%;
		right: 30%;
		font-size: 30rpx;
	    color: white;
	}
	.box .zhdao{
		width: 238rpx;
		height: 76rpx;
		position: fixed;
		bottom: 50%;
		right: 30%;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		opacity: 1;
		border: 2rpx solid #FFFFFF;
		line-height: 76rpx;
		text-align: center;
		color: white;
	}
	
.module::v-deep{
	background: #ffffff;
	padding: 20rpx $interval 0rpx;
	.search {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 6rpx solid $color-primary;
		border-radius: 35rpx;
		overflow: hidden;
		.icon-input {
			flex: 1;
			display: flex;
			align-items: center;
			.icon {
				margin-left: 25rpx;
				margin-right: 18rpx;
			}
			input {
				flex: 1;
				color: $text-color;
			}
			.input {
				color: #a1a0a0;
			}
		}
		.btn {
			color: #ffffff;
			width: 116rpx;
			height: 67rpx;
			line-height: 60rpx;
			text-align: center;
			background: $color-primary;
			border-top-left-radius: 35rpx;
			border-bottom-left-radius: 35rpx;
		}
	}
	.menu {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: $interval;
		margin-left: $interval;
		padding: 0px 20rpx 0px $interval;
		.list {
			flex-shrink: 1;
			display: flex;
			align-items: center;
			white-space: nowrap;
			.item {
				display: inline-block;
				margin-right: 40rpx;
				position: relative;
				height: 60rpx;
				font-size: $font-size-max;
				image.imga {
					width: 30rpx;
					position: absolute;
					left: 50%;
					bottom: -0rpx;
					opacity: 0;
					margin-left: -20rpx;
					text-align: center;
				}
			}
			.active {
				font-size: $font-size-max + 4;
				font-weight: 600;
				image.imga {
					opacity: 1;
				}
			}
		}
		.add {
			flex-shrink: 0;
			width: 96rpx;
			height: 80rpx;
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: -0rpx 0px 0rpx 0px rgba(0, 0, 0, 0.08);
			.img {
				width: 40rpx;
				height: 40rpx;
				margin-top: -18rpx;
			}
		}
	}
}
.scroll-view {
	height: calc(100% - 210rpx);
	.c {
		padding: 10rpx $interval 0rpx;
		//background: #F7F7F7;
		background: #ffffff;
	}

	.swiper {
		height: 240rpx;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.04);
		border-radius: 20rpx;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
		overflow: hidden;
		margin: 0rpx 0px 20rpx;
		.img {
			width: 100%;
			height: 240rpx;
		}
	}
	.noticebar {
		margin-top: 24rpx;
		height: 40rpx;
		background: #fff3f3;
		border-radius: 20rpx 0px 20rpx 20rpx;
		display: flex;
		align-items: center;

		.imga {
			width: 76rpx;
		}
		.bar {
			height: 40rpx;
			flex: 1;
			margin-top: -36rpx;
			font-size: $font-size-min;
			text {
				color: $text-color !important;
				font-size: $font-size-min !important;
			}
		}
	}
	.m-list {
		display: flex;
		margin-top: 40rpx;
		margin: 20rpx -1 * $interval 0px;
		padding: 0px $interval 10rpx;
		justify-content: space-between;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		.item {
			text-align: center;
			.img {
				width: 88rpx;
				height: 88rpx;
			}
			.text {
				color: $text-color-grey;
				font-size: -2 + $font-size;
				margin-top: 12rpx;
			}
		}
	}
	.product-data-list{
		margin:0px -24rpx;
		padding: 0px 15rpx;
	}
}
.tit-a{
	padding: 0rpx 30rpx;
	height: 30rpx;
	font-size: 25rpx;
	color: #FFFFFF;
	line-height: 30rpx;
	text-align: center;
	border-radius: 20rpx 20rpx 0 20rpx;
}
.hint {
	text-align: center;
	padding: 15px 0px;
	color: $text-color-grey;
	font-size: $font-size-min;
}
</style>
